<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 <meta http-equiv="content-style-type" content="text/css"/>
 <title></title>
 <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.5.custom.css"></link>
 <link rel="stylesheet" href="../css/ruin.css"></link>
 <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
 <script type="text/javascript" src="../js/jquery-ui-1.8.5.custom.min.js"></script>
 <script type="text/javascript">
var files = new Object();
var priorLine = { line: null, index: null };
var interval = 1000;
var contTimer = null;
var editing = null;
function addFile(name, line, command) {
  var a = name.split('/');
  $('#lists').tabs('add' , '/debug/file/' + name , a[a.length - 1]);
  var index = $('#lists').tabs('length') - 1;
  $('#lists').tabs('select', index);
  $('td').bind('click', function(ev) {
    var bgclr = '';
    var sub = 'false';
    if (ev.currentTarget.style.backgroundColor == '') {
      sub = 'true';
      bgclr = 'saddlebrown';
    } else if (ev.currentTarget.style.backgroundColor == 'yellow') {
      sub = 'true';
      bgclr = 'olive';
    } else if (ev.currentTarget.style.backgroundColor == 'olive') {
      bgclr = 'yellow';
    }
    var file = selectFile();
    if (file != null) {
      var line = 0;
      var list = $('#ui-tabs-' + (index * 2 + 2) + ' > table > tbody > tr > td');
      for (var i = 0; i < list.length; i++) {
        if (list[i] == ev.currentTarget) {
          line = i + 1;
          break;
        }
      }
      $.get('/debug/break/' + sub + '/' + file + '/' + line, function() {
        var clr = '';
        if (sub == 'true') {
          clr = 'white';
        }
        ev.currentTarget.style.backgroundColor = bgclr;
        ev.currentTarget.style.color = clr;
      });
    }
  });
  return index;
}
function selectFile() {
  var index = $('#lists').tabs('option', 'selected');
  var key, file;
  for (key in files) {
    if (files[key] == index) {
      file = key;
      break;
    }
  }
  return file;
}
function changeTab(index) {
  $('#lists').tabs('select', index);
}
function lineColor(command, brk) {
  if (brk) {
    return 'olive';
  } else if (command == 'cont') {
    return 'aquamarine';
  }
  return 'yellow';
}
function stopRun() {
  clearTimeout(contTimer);
  contTimer = null;
  $('#run').button('option', 'label', 'run');
  $('#edit').button('option', 'disabled', false);
}
function setLine(index, line, command, brk) {
  if (line > 0) {
    --line;
  }
  if (priorLine.index != null) {
    var style = $('#ui-tabs-' + (priorLine.index * 2 + 2) + ' > table > tbody > tr > td')[priorLine.line].style;
    style.backgroundColor = priorLine.backgroundColor;
    style.color = priorLine.color;
  }
  var style = $('#ui-tabs-' + (index * 2 + 2) + ' > table > tbody > tr > td')[line].style;
  priorLine.index = index;
  priorLine.line = line;
  priorLine.color = style.color;
  priorLine.backgroundColor = style.backgroundColor;
  style.backgroundColor = lineColor(command, brk);
  style.color = '';
  $('#ui-tabs-' + (index * 2 + 2) + ' > table > tbody > tr > td')[line].scrollIntoView(true);
}
function runProc(command) {
  if (isEditMode()) {
    saveProc(command, false);
  } else {
    if (contTimer == null) {
      contProc('cont');
      $('#run').button('option', 'label', 'stop');
      $('#edit').button('option', 'disabled', true);
    } else {
      stopRun();
    }
  }
}
function stepProc(command) {
  if (isEditMode()) {
    saveProc(command, true);
    return;
  }
  $.getJSON('/debug/' + command, function(data) {
    if (data == null || data.file == null) {
      if (contTimer != null) stopRun();
      $('button').button('disable');
      return;
    }
    if (data['break'] || data['event'] == 'exit') {
      stopRun();
      if (data['event'] == 'exit') {
        $('button').button('disable');
        $('#vars').tabs({
          show: function(envet, ui) {
            alert('program terminated');
          }
        });
        alert('program exit');
      }
    }
    if (files[data.file] == null) {
      files[data.file] = addFile(data.file, data.line, command);
    } else {
      changeTab(files[data.file]);
    }
    setLine(files[data.file], data.line, command, data['break']);
    $('#vars').tabs('load', $('#vars').tabs('option', 'selected'));
    var s = '<table class="vars"><tr><th>br</th><th>File</th><th>Line</th><th>Status</th></tr>';
    for (var i = 0; i < data.threads.length; i++) {
      if (data.threads.length > 1) {
      }
      var t = data.threads[i][0];
      s += '<tr><td>' + (t.self ? '*' : '') + '</td><td>' + t.file + '</td><td class="numtd">' + t.line
           + '</td><td>' + t.status + '</td></tr>';
    }
    $('#tlist')[0].innerHTML = s + '</table>';
    var span = document.createElement('span');
    span.innerHTML = data.stdout;
    $('#stdout')[0].appendChild(span);
    span = document.createElement('span');
    $('#stdout')[0].appendChild(span);
    span.scrollIntoView(true);
  });
}
function contProc(command) {
  stepProc(command);
  contTimer = setTimeout('contProc("' + command + '");', interval);
}
function editProc(command) {
  var emode = isEditMode();
  if (emode) {
    var root = $('#ui-tabs-' + (editing * 2 + 2))[0];
    if (root.codeTable) {
      root.replaceChild(root.codeTable, root.childNodes(0));
    }
  } else {
    editing = $('#lists').tabs('option', 'selected');
    var root = $('#ui-tabs-' + (editing * 2 + 2))[0];
    $.get('/debug/file/' + selectFile(), function(data) {
      root.codeTable = root.childNodes(0);
      var txa = document.createElement('textarea');
      txa.style.fontSize = '11pt';
      txa.rows = 22;
      txa.cols = 68;
      txa.innerHTML = data;
      root.replaceChild(txa, root.codeTable);
      root.originalCode = data;
    }, 'text');
  }  
  editMode(emode);
}
function saveProc(command, rst) {
  var root = $('#ui-tabs-' + (editing * 2 + 2))[0];
  var newText = root.childNodes(0).innerHTML;
  var anew = newText.split(/\r?\n/)
  var aorg = root.originalCode.split(/\r?\n/)
  if (anew.length == aorg.length && isSameArray(anew, aorg)) {
    alert('no save is needed');
  } else {
    $.post('/debug/file/' + selectFile(), newText, function(data) {
      if (rst) {
        document.location.href = 'http://localhost.:8384/restart';
      }
    }, 'text');
  }  
  editMode(isEditMode());
  if (root.codeTable) {
    root.replaceChild(root.codeTable, root.childNodes(0));
  }
}
function isSameArray(a0, a1) {
  // assert a0.length == a1.length
  for (var i = 0; i < a0.length; i++) {
    if (a0[i] != a1[i]) return false;
  }
  return true;
}
function isEditMode() {
  return $('#edit').button('option', 'label') == 'Disc';
}
function editMode(b) {
  var btn = new Array('#step', '#run', '#edit');  
  var label = (b) ? new Array('Step', 'Run', 'Edit') : new Array('Save Rst', 'Save Cont', 'Disc');
  for (var i = 0; i < 3; i++) {  
    $(btn[i]).button('option', 'label', label[i]);
  }
}
function initTabs(elm) {
  elm.tabs();
  elm.tabs({ajaxOptions: {async: false}});
  elm.tabs('option', 'cache', true);
}
$(document).ready(function() {
  initTabs($('#lists'));
  initTabs($('#vars'));
  $('#vars').tabs({
    show: function(envet, ui) {
      $('#vars').tabs('load', $('#vars').tabs('option', 'selected'));
    },
    load: function(event, ui) {
      $('.var-value').dblclick(function(e) {
        var v = e.currentTarget.innerHTML;
        e.currentTarget.innerHTML = '<input type="text" value="' + v + '"/>';
        setTimeout(function() {
          e.currentTarget.childNodes.item(0).focus();
          $(e.currentTarget.childNodes.item(0)).focusout(function(ev) {
            var loc = 'locals/';
            if ($('#vars').tabs('option', 'selected') == 1) {
              loc = 'self/';
            } else if ($('#vars').tabs('option', 'selected') == 2) {
              loc = 'globals/';
            }
            var url = '/debug/' + loc
                     + encodeURIComponent(e.currentTarget.previousSibling.innerHTML)
                     + '/' + encodeURIComponent(ev.currentTarget.value);
            e.currentTarget.innerHTML = ev.currentTarget.value;
            $.get(url, function() {
              $('#vars').tabs('load', $('#vars').tabs('option', 'selected'));
            });
          });
         }, 0);
      });
    }
  });
  $('#intval').slider();
  $('#intval').slider('option', 'value', 10);
  $('#intval').slider({
    change: function(e, ui) {
      interval = $('#intval').slider('option', 'value') * 100;
    }
  });
  $.ajaxSetup({cache: false});

  $('button').button();
  $('#step').click(function() {
    stepProc('step');
  });
  $('#run').click(function() {
    runProc('run');
  });
  $('#edit').click(function() {
    editProc('edit');
  });
  $('#waiting').ajaxError(function() {
    if (contTimer != null) {
      stopRun();
    }
  });
  stepProc('stepping');
});
</script>
</head>
<body>
<div class="list-pane">
  <div id="button-panel">
    <div class="console">
      <button id="step">Step</button>
      <button id="run">Run</button>
      <button id="edit">Edit</button>
    </div>
  </div>
  <div id="speed-panel">
    <div id="intval"></div>
    <div style="float: left; width: 50%">fast &lt;----</div>
    <div style="float: right">----&gt; slow</div>
  </div>
  <div id="lists" style="clear: both">
    <ul></ul>
  </div>
</div>
<div class="vars-pane">
  <div id="vars">
    <ul>
      <li><a href="/debug/locals" title="Local Vars"><span>Local Vars</span></a></li>
      <li><a href="/debug/self" title="Self Vars"><span>Self Vars</span></a></li>
      <li><a href="/debug/globals" title="Global Vars"><span>Global Vars</span></a></li>
    </ul>
    <div id="Local_Vars"></div>
    <div id="Self_Vars"></div>
    <div id="Global_Vars"></div>    
  </div>
</div>
<div class="proc-pane">
  <div id="output">
    <span id="stdout"></span>
  </div>
  <div id="threads">
    <span id="tlist"></span>
  </div>
<div class="footer">    
  <hr>
  <div id="waiting"></div>
  <address id="ruby-platform"></address>
  <!-- hhmts start --> Last modified: Tue Nov 09 02:37:01 +0900 2010 <!-- hhmts end -->
</div>    
</body> </html>
